<template>
   <div id="app">
  <el-container>
    <el-header>
      <h1>学习计划与扇形图</h1>
    </el-header>
    <el-main >
      <el-container>
        <el-aside class="task-container">
          <h2>我的学习计划</h2>
          <div class="task" v-for="(task, index) in tasks" :key="index">
            <!-- 添加状态栏 -->
            <div class="status-bar">
              <span v-if="task.status === 'completed'" class="status completed">已完成</span>
              <span v-else-if="task.status === 'inProgress'" class="status in-progress">进行中</span>
              <span v-else class="status pending">未完成</span>
            </div>
            <h3>{{ task.title }}</h3>
            <p>{{ task.description }}</p>
            <p class="due-date">截止日期：{{ task.dueDate }}</p>
            <div class="actions">
              <a href="#">编辑</a>
              <a href="#">删除</a>
            </div>
          </div>
        </el-aside>
        <el-main class="chart-container">
          <el-card>
            <div style="height: 300px; width: 100%;">
               <h2>学习数据统计</h2>
              <!-- 这里是扇形图组件 -->
              <div id="chart" style="width: 100%; height: 300px;"></div>
              <el-pie :data="chartData" title="学习计划完成情况"></el-pie>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  name: "StudyPlan",
  setup() {
    const tasks = ref([
      { title: '阅读《JavaScript基础教程》', description: '阅读第3章至第5章', dueDate: '2024-05-10', status: 'inProgress' },
      { title: '完成编程作业', description: '完成《JavaScript实践》作业', dueDate: '2024-05-12', status: 'completed' },
      { title: '学习Vue.js', description: '学习Vue.js的基础知识', dueDate: '2024-05-15', status: 'pending' },
      { title: '撰写论文', description: '完成研究生论文初稿', dueDate: '2024-05-20', status: 'inProgress' },
      { title: '准备面试', description: '准备技术面试', dueDate: '2024-05-25', status: 'pending' }
    ]);

    const chartData = ref([
      { value: 335, name: '已完成' },
      { value: 310, name: '未完成' },
      { value: 234, name: '进行中' },
      { value: 135, name: '暂停' },
      { value: 1548, name: '计划中' }
    ]);

    onMounted(() => {
      // 初始化Echarts
      const myChart = echarts.init(document.getElementById('chart'));

      // 配置选项
      const option = {
        title: {
          text: '学习计划完成情况',
          left: 'center'
        },
        series: [
          {
            name: '学习计划完成情况',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: chartData.value, // 使用ref的值
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      // 使用配置项设置图表
      myChart.setOption(option);
    });

    return { tasks, chartData };
  },
};

</script>

<style scoped>
 body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
  }

  .container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .task-container {
    flex: 1;
    padding-right: 20px;
    overflow-y: auto;
    max-height: 400px;
  }

  .chart-container {
    flex: 1;
    padding-left: 20px;
  }

  h1 {
    text-align: center;
    color: #333;
  }

  .task {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    position: relative; /* 添加这一行 */
  }

  .task h2 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #555;
  }

  .task p {
    margin: 0;
    color: #777;
  }

  .task .due-date {
    font-style: italic;
    color: #999;
  }

  .task .actions {
    margin-top: 10px;
  }

  .task .actions a {
    text-decoration: none;
    color: #007bff;
    margin-right: 10px;
  }

  .task .actions a:hover {
    text-decoration: underline;
  }

  /* 新增样式 */
  .status-bar {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .status-bar .status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
  }

  .status-bar .completed {
    background-color: #28a745; /* 绿色 */
  }

  .status-bar .in-progress {
    background-color: #007bff; /* 蓝色 */
  }

  .status-bar .pending {
    background-color: #ffc107; /* 黄色 */
  }

  .status-bar .dropdown {
    display: inline-block;
    margin-left: 10px;
  }
</style>